<template>
  <main-comp>
    <div class="m-mail-close">
      <div class="button"><img src="../assets/mail_button.png" /></div>
      <div class="title" :style="animation('fadeIn', 1, 3, 1.3, 'normal', 'linear')"></div>
      <div class="title-bottom" :style="animation('fadeIn', 1, 3, 1.3, 'normal', 'linear')"></div>
      <div :class="['btn', {'down': isDown}]" @click="handleClick" @touchstart="btnDown" @touchend="btnUp" :style="animation('fadeIn', 1, 2, 3.4)"></div>
      <div class="logo" :style="animation('fadeIn', 0.6, 0.6)"><img src="../assets/logo.png" /></div>
    </div>
  </main-comp>
</template>

<script>
import mainComp from '../comps/last-main-comp'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      isDown: false
    }
  },
  components: {
    mainComp
  },
  computed: {
    ...mapState({
      down: state => state.down
    })
  },
  methods: {
    handleClick() {
      location.href = 'https://creditcard.cmbc.com.cn/active/wap/wonderful/active/cmbc18616H5/index.html'
    },
    btnDown() {
      this.isDown = true
    },
    btnUp() {
      this.isDown = false
    }
  },
  watch: {
    down(n) {
      if (n) {
        this.$store.dispatch('prevScene')
      }
    }
  }
}
</script>

<style scoped>
.m-mail-close {
  background: url('../assets/mail_close.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 7.38rem;
  height: 10.08rem; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn {
  background: url('../assets/6/btn.png') no-repeat;
  background-size: 100% 100%;
  margin-left: 2.72rem;
  margin-top: 0.6rem;
  width: 1.77rem;
  height: 0.81rem; 
}
.btn.down {
  background: url('../assets/6/btn_down.png') no-repeat;
  background-size: 100% 100%;
}
.m-mail-close .button {
  width: 1.5rem;
  height: 1.52rem;
  margin-top: 0.76rem;
  margin-left: 2.86rem;
}
.m-mail-close .title {
  width: 4.21rem;
  height: 0.9rem;
  margin-top: 1.2rem;
  margin-left: 1.41rem;
  background: url('../assets/6/title.png') no-repeat;
  background-size: 100% 1.71rem;
}
.m-mail-close .title-bottom {
  width: 4.21rem;
  height: 0.81rem;
  margin-left: 1.41rem;
  background: url('../assets/6/title.png') no-repeat center bottom;
  background-size: 100% 1.71rem;
}
.m-mail-close .logo {
  width: 3.4rem;
  height: 0.47rem;
  margin-top: 1.62rem;
  margin-left: 2.19rem;
}
.m-mail-close img {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
